import React, { Component } from "react";

class User extends Component {
  // 创建一个DOM对象
  divRef = React.createRef();
  state = {
    count: 0,
    text: "haha",
    obj: {
      name: "zhangsan",
      age: 18
    }
  };
  clickHandler = () => {
    // this.setState({ count: this.state.count + 1 });
    // this.setState((prevState) => {
    //   return { count: prevState.count + 1 };
    // });
    // this.setState({
    //   obj: {
    //     ...this.state.obj,
    //     age: this.state.obj.age + 1
    //   }
    // });
    console.log(this.divRef);
  };
  render() {
    return (
      <div ref={this.divRef}>
        <h1>
          {this.state.count}---{this.state.text}
        </h1>
        <h1>
          {this.state.obj.name}---{this.state.obj.age}
        </h1>
        <button onClick={this.clickHandler}>click</button>
        <ul>
          <li>姓名：{this.props.name}</li>
          <li>性别：{this.props.sex}</li>
          <li>年龄：{this.props.age}</li>
        </ul>
      </div>
    );
  }
}

export default User;
